<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="846px"
      title="导入"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <a-row :gutter="0">
            <a-col :span="24">
              <a-form-model-item ref="modelName" label="名称" prop="modelName">
                <a-input
                  v-model="form.modelName"
                  placeholder="请输入名称"
                  :maxLength="200"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item
                ref="modelInfo"
                label="模板信息"
                prop="modelInfo"
                :rules="{
                  required: true,
                  validator: validateModelInfo,
                }"
              >
                <div class="download-model">
                  <span>1、下载导入模板，根据模板提示完善内容</span>
                  <button @click="downloadTemplate()">下载模板</button>
                </div>
                <div class="choose-file-warp">
                  <div class="tip">
                    2、上传完善好的内容，支持.xls、.xlsx文件（单个文件最大100MB）
                  </div>
                  <div class="choose-file">
                    <a-upload-dragger
                      name="file"
                      accept=".xls,.xlsx"
                      :beforeUpload="beforeUpload"
                    >
                      <div class="icon"></div>
                      <div class="upload-tip">
                        单击或拖动文件到此区域进行上传
                      </div>
                    </a-upload-dragger>
                  </div>
                  <div class="choosed-file-warp">
                    <div
                      class="choosed-file flex"
                      v-for="(item, index) in fileList"
                      :key="index"
                    >
                      <div class="name">
                        {{ item.name }}
                      </div>
                      <div class="size">
                        {{ (item.size / 1024).toFixed(2) }} kb
                      </div>
                      <div
                        class="delete-button flex"
                        @click="delChoosedFile(index)"
                      >
                        <a-icon type="delete" />
                      </div>
                    </div>
                  </div>
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="curve-modal-footer">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" @click="onSubmit()" :loading="buttonLoading">
          确定
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
import { downLoadFileByArraybuffer } from "@/utils/util";
export default {
  name: "addModal",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      buttonLoading: false,
      form: {
        //模型名称
        modelName: "",
      },
      rules: {
        modelName: [
          { required: true, message: "请输入模型名称", trigger: "blur" },
        ],
      },
      fileList: [],
    };
  },
  methods: {
    //上传文件之前钩子
    beforeUpload(file) {
      this.fileList = [file];
      return false;
    },
    //下载模板
    downloadTemplate() {
      axios
        .get("/probusiness/qeModel/downloadTemplate", {
          apiType: "file",
          responseType: "arraybuffer",
        })
        .then((res) => {
          downLoadFileByArraybuffer(res, "品质工程模板");
        })
        .catch((_) => {
          this.$message.error("模版下载失败，请稍后重试！");
        });
    },

    //自定义模板信息校验
    validateModelInfo(rule, value, callback) {
      let { fileList } = this;
      if (fileList.length == 0) {
        return callback(new Error("请选择模板"));
      } else {
        callback();
      }
    },
    //提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          let { modelName } = this.form;
          let formdata = new FormData();
          formdata.append("uploadFile", this.fileList[0]);
          formdata.append(
            "data",
            JSON.stringify({ modelName, province: "", modelType: "1" })
          );
          axios
            .post(`/probusiness/qeModel/importModel`, formdata, {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            })
            .then((res) => {
              this.$message.success(
                res.message ? res.message : "操作成功",
                1.5
              );
              this.closeModal();
              this.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.buttonLoading = false;
            });
        }
      });
    },
    //删除
    delChoosedFile(index) {
      this.fileList = this.fileList.filter((v, i) => i != index);
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
    //重置表单
    resetForm() {
      this.fileList = [];
      this.form = {
        //模型名称
        modelName: "",
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: @primary-color;
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .ant-modal-header {
    position: relative;
    .ant-modal-title {
      &::before {
        content: "";
        position: absolute;
        top: 18px;
        left: 10px;
        background-color: @primary-color;
        height: 17px;
        width: 5px;
      }
    }
  }

  .curve-modal-body {
    padding: 14px;
    max-height: 700px;
    overflow: auto;
  }
  .curve-modal-footer {
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 100px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      .download-model {
        height: 80px;
        background: #fafafa;
        border: 1px dashed #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #666;
        box-sizing: border-box;
        padding: 0 25px;
        margin-bottom: 7px;
        button {
          padding: 0;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #3759a0;
          width: 90px;
          height: 36px;
          background: #ffffff;
          border: 1px solid #3759a0;
          border-radius: 4px;
        }
      }
      .choose-file-warp {
        background: #fafafa;
        border: 1px dashed #e5e5e5;
        box-sizing: border-box;
        padding: 14px 24px 24px 24px;
        margin-bottom: 4px;
        .tip {
          padding-bottom: 10px;
          font-size: 14px;
          color: #666666;
        }
        .choose-file {
          height: 208px;
          border: 1px solid #e5e5e5;
          .ant-upload-list-text {
            display: none;
          }
          .ant-upload {
            border: none;
            background: #ffffff;
            .icon {
              width: 32px;
              height: 32px;
              background: url("https://jszhgd.cn/static/pc/quality-engineering-app/download.png")
                no-repeat;
              background-size: 100% 100%;
              margin: 0 auto 10px auto;
            }
            .upload-tip {
              font-size: 14px;
              color: #666;
            }
          }
        }
        .choosed-file-warp {
          .choosed-file {
            align-items: center;
            color: #3759a0;
            .name {
              width: 450px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .size {
              margin-left: auto;
            }
            .delete-button {
              width: 20px;
              height: 20px;
              margin-left: 4px;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              margin-left: 4px;
              color: #ff4d4f;
            }
          }
        }
      }
    }
  }
}
</style>
